<#assign base=request.contextPath />
<!DOCTYPE html>
<html>
<head>
    <base href="${base}">
    <meta charset="utf-8">
    <title>列表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="${base}/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="${base}/layuiadmin/style/admin.css" media="all">
    <link rel="stylesheet" href="${base}/css/my.css" media="all">
    <style>
        .b {
            color: #01AAED;
        }

        .layui-table a {
            color: #01AAED;
        }

        #main {
            margin: 0 auto;
            width: 1200px;
        }

        .time {
            height: 30px;
            line-height: 30px;
            margin: 10px;
        }

        .table td {
            text-align: left;
            height: 28px;
            line-height: 28px;
        }

        .event_tr a, .event_tr2 a {
            margin-left: 20px;
            padding-left: 30px;
            background: url(${base}/css/yq/hot.gif) no-repeat;
        }

        .demo-input {
            padding-left: 10px;
            height: 20px;
            line-height: 20px;
            width: 100px;
            border: 1px solid #e6e6e6;
        }
    </style>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
			<div class="layui-col-md8">
				<div class="layui-row layui-col-space15">
				<div class="layui-col-md12">
					<div class="layui-card">
						<div class="layui-card-header">数据概览</div>
						<div class="layui-card-body">

							<div class="layui-carousel layadmin-carousel layadmin-backlog">
								<div class="carousel-item">
									<ul class="layui-row layui-col-space10">
										<li class="layui-col-xs4"><a
											class="layadmin-backlog-body">
												<h3>进行中的考试场次</h3>
												<p>
													<cite>${cnt11!}</cite>
												</p>
										</a></li>
										<li class="layui-col-xs4"><a
											class="layadmin-backlog-body">
												<h3>已完成考试场次</h3>
												<p>
													<cite>${cnt12!}</cite>
												</p>
										</a></li>
										<li class="layui-col-xs4"><a
											class="layadmin-backlog-body">
												<h3>未开始的考试场次</h3>
												<p>
													<cite>${cnt13!}</cite>
												</p>
										</a></li>
										<li class="layui-col-xs4"><a
											class="layadmin-backlog-body">
												<h3>参加考试人数</h3>
												<p>
													<cite>${cnt21!}</cite>
												</p>
										</a></li>
										<li class="layui-col-xs4"><a
											class="layadmin-backlog-body">
												<h3>已提交考卷人数</h3>
												<p>
													<cite>${cnt22!}</cite>
												</p>
										</a></li>
										<li class="layui-col-xs4"><a
											class="layadmin-backlog-body">
												<h3>未提交考卷人数</h3>
												<p>
													<cite>${cnt23!}</cite>
												</p>
										</a></li>
									</ul>
								</div>
							</div>
						</div>
					</div>
				</div>
				</div>

				<div class="layui-row layui-col-space15">
				<div class="layui-col-md12">
					<div class="layui-card">
		                <div class="layui-card-header">echarts图</div>
		                <div class="layui-card-body">
		                    <div id="chart1" style="height:300px"></div>
		                </div>
		            </div>
				</div>
				</div>
				
				<div class="layui-row layui-col-space15">
				<div class="layui-col-md12">
					<div class="layui-card">
		                <div class="layui-card-header">echarts图</div>
		                <div class="layui-card-body">
		                    <div id="chart2" style="height:300px"></div>
		                </div>
		            </div>
				</div>
				</div>
				
			</div>

			<div class="layui-col-md4">
            <div class="layui-card">
                <div class="layui-card-header">服务器信息</div>
                <div class="layui-card-body layui-text">
                    <table class="layui-table">
                        <colgroup>
                            <col width="140">
                            <col>
                        </colgroup>
                        <tbody>
                        <tr>
                            <td>操作系统</td>
                            <td class="b">${osname}</td>
                        </tr>
                        <tr>
                            <td>JDK版本</td>
                            <td class="b">${javaVersion}</td>
                        </tr>
                        <tr>
                            <td>服务器内存</td>
                            <td class="b">${mem}</td>
                        </tr>
                        <tr>
                            <td>内存使用率</td>
                            <td class="b">${memUsedPercent} %</td>
                        </tr>
                        <tr>
                            <td>CPU使用率</td>
                            <td class="b">${cpuUsed} %</td>
                        </tr>
                        <tr>
                            <td>JVM内存</td>
                            <td class="b">${jvmMaxMem}</td>
                        </tr>
                        <tr>
                            <td>JVM内存使用率</td>
                            <td class="b">${useableMemeory} %</td>
                        </tr>
                        <tr>
                            <td>系统运行时间</td>
                            <td class="b">${runningTime} 分钟</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            
            <div class="layui-row layui-col-space15">
				<div class="layui-col-md12">
					<div class="layui-card">
		                <div class="layui-card-header">最新通知公告</div>
		                <div class="layui-card-body">
		                    <table class="layui-table" lay-skin="nob">
		                        <colgroup>
		                            <col>
		                            <col width="90">
		                        </colgroup>
		                        <#list tongbaoList as tb>
		                        <tr class="tb-tr" data-id="${tb.oid}">
		                            <td><a href="javascript:showinfo(${tb.oid})">${tb.title}</a></td>
		                            <td>${tb.ctime?string('MM月dd日')}</td>
		                        </tr>
		                    </#list>
		                    </table>
		                </div>
		            </div>
				</div>
				</div>

        </div>
    </div>
</div>
</body>

<script src="${base}/layuiadmin/layui/layui.js"></script>
<script src="${base}/js/commons.js"></script>
<script src="${base}/js/lib/jquery-1.11.3.min.js"></script>
<script src="${base}/js/lib/echarts.min.js" type="text/javascript"></script>


<script>
layui.config({
    base: '${base}/layuiadmin/' //静态资源所在路径
}).extend({
    index: 'lib/index'
}).use(['index'], function () {
	var layer = layui.layer;
	
	$('tr.tb-tr').click(function() {
		var oid = $(this).data('id');
		var idx = layer.open({
			type: 2,
      		title: '通知公告详情',
      		content: '${base}/comm/tongbao/info/' + oid,
      		maxmin: true,
      		btnAlign: 'c',
      		area: ['800px', '600px'],
      		btn: ['关闭']
		});
		// layer.full(idx);
		
	});
	
	
	// 获得数据，展示图表
	draw_chart1();
	
	// 从后台获得数据，展示图表
	draw_chart2();
})


function draw_chart1() {
	$.post('${base}/blog/chart1', function(ret) {
		// ret.data.names, ret.data.datas
		var chart = echarts.init(document.getElementById('chart1'));
		var option = {
		    tooltip: {
		        trigger: 'item',
		        formatter: '{a}<br>{b}：{c}（{d}%）'
		    },
		    legend: {
		        orient: 'vertical',
		        left: 10,
		        data: ret.data.names
		    },
		    series: [{
		            name: '访问来源',
		            type: 'pie',
		            radius: ['50%', '70%'],
		            avoidLabelOverlap: false,
		            label: {
		                show: false,
		                position: 'center'
		            },
		            emphasis: {
		                label: {
		                    show: true,
		                    fontSize: '30',
		                    fontWeight: 'bold'
		                }
		            },
		            labelLine: {
		                show: false
		            },
		            data: ret.data.datas
		        }
		    ]
		};
		chart.setOption(option);
	})
}

function draw_chart2() {
	$.post('${base}/blog/chart2', function(ret) {
		var chart = echarts.init(document.getElementById('chart2'));
		var option = {
			    title: {
			        text: '一天用电量分布',
			        subtext: '纯属虚构'
			    },
			    tooltip: {
			        trigger: 'axis',
			        formatter: function(a, t, cb) {
			        	return a[0].seriesName + "：" + a[0].data.value + "<br>自定义：" + a[0].data.txt;
			        }
			    },
			    toolbox: {
			        show: true,
			        feature: {
			            saveAsImage: {}
			        }
			    },
			    xAxis: {
			        type: 'category',
			        boundaryGap: false,
			        data: ret.data.names
			    },
			    yAxis: {
			        type: 'value',
			        axisLabel: {
			            formatter: '{value} W'
			        }
			    },

			    series: [
			        {
			            name: '用电量',
			            type: 'line',
			            smooth: true,
			            data: ret.data.datas,
			            markArea: {
			                data: [ [{
			                    name: '早高峰',
			                    xAxis: '07:30'
			                }, {
			                    xAxis: '10:00'
			                }], [{
			                    name: '晚高峰',
			                    xAxis: '17:30'
			                }, {
			                    xAxis: '21:15'
			                }] ]
			            }
			        }
			    ]
			};

		chart.setOption(option);
	})
}

</script>

</html>

